<template>
  <el-form-item v-if="prop.type === 'input'" :label="obj.label">
    <el-input v-model="obj.field" :placeholder="obj.placeholder" :type="obj.type" />
  </el-form-item>
  <el-form-item v-else-if="prop.type === 'select'" :label="obj.label">
    <el-select v-model="obj.field" :placeholder="obj.placeholder" class="w-full" clearable>
      <el-option v-for="item in obj.option" :label="item.label" :value="item.value" />
    </el-select>
  </el-form-item>
  <el-form-item v-else-if="prop.type === 'date'" label="date">
    <el-date-picker
        v-model="form.date1"
        class="w-full"
        format="YYYY/MM/DD"
        placeholder="选择日期"
        type="date"
        value-format="YYYY/MM/DD"
    />
  </el-form-item>
  <el-form-item v-else-if="prop.type === 'daterange'" label="date">
    <el-date-picker
        v-model="form.value3"
        class="bg-white"
        end-placeholder="结束日期"
        format="YYYY/MM/DD"
        range-separator=" - "
        start-placeholder="开始日期"
        type="daterange"
        unlink-panels
        value-format="YYYY/MM/DD"
    />
  </el-form-item>
  <el-form-item v-else-if="prop.type === 'datetimerange'" label="date">
    <el-date-picker
        v-model="form.value4"
        end-placeholder="结束日期时间"
        format="YYYY/MM/DD HH:mm:ss"
        start-placeholder="开始日期时间"
        type="datetimerange"
        unlink-panels
        value-format="YYYY/MM/DD HH:mm:ss"
    />
  </el-form-item>
  <el-form-item v-else-if="prop.type === 'datetime'" label="datetime">
    <el-date-picker
        v-model="form.value4"
        format="YYYY/MM/DD HH:mm:ss"
        placeholder="请选择日期和时间"
        type="datetime"
        value-format="YYYY/MM/DD HH:mm:ss"
    />
  </el-form-item>
  <el-form-item v-else-if="prop.type === 'time-picker'" label="time">
    <el-time-picker
        v-model="form.date2"
        format="HH:mm"
        placeholder="选择时间"
        value-format="HH:mm"
    />
  </el-form-item>
  <el-form-item v-else-if="prop.type === 'time-picker-range'" label="time">
    <el-time-picker
        v-model="form.value11"
        end-placeholder="结束时间"
        format="HH:mm"
        is-range
        range-separator="-"
        start-placeholder="开始时间"
        value-format="HH:mm"
    />
  </el-form-item>
  <el-form-item v-else-if="prop.type === 'switch'" label="switch">
    <el-switch v-model="form.delivery" active-text="是" inactive-text="否" inline-prompt />
  </el-form-item>
  <el-form-item v-else-if="prop.type === 'checkbox'" label="checkbox">
    <el-checkbox-group v-model="form.type">
      <el-checkbox label="Online activities" name="type" />
    </el-checkbox-group>
  </el-form-item>
  <el-form-item v-else-if="prop.type === 'radio'" label="radio">
    <el-radio-group v-model="form.resource">
      <el-radio label="Sponsor" />
    </el-radio-group>
  </el-form-item>
</template>

<script setup>
import {reactive} from 'vue'
import {input, select} from './form'

let prop = defineProps({
  type: String,
  data: {
    type: Object,
    default: () => {
      return {
        label: '',
        field: '',
        placeholder: ''
      }
    }
  }
})
let obj = reactive({
  label: '',
  field: '',
  placeholder: ''
})
let form = reactive({
  label: '',
  field: '',
  placeholder: ''
})
switch (prop.type) {
  case 'input':
    obj = new input()
    obj.setData('label', prop.data.label)
    obj.setData('field', prop.data.field)
    obj.setData('placeholder', prop.data.placeholder)
    break
  case 'select':
    obj = new select()
    obj.setData('label', prop.data.label)
    obj.setData('field', prop.data.field)
    obj.setData('placeholder', prop.data.placeholder)
    obj.setData('option', prop.data.option)
    break
}

</script>

<style scoped>

</style>